import React from "react";
import { TabBar } from 'antd-mobile';

import { Route, Switch, Redirect } from "react-router-dom";

// 引入4个子页面
import Index from "./index/index.js";
import Found from "./found";
import News from "./news";
import My from "./my";

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'blueTab'
    };

    // 判断一下当前url 如果它是 /home/ 重定向到 /home/index
    if (this.props.match.path === "/home") {
      this.props.history.push("/home/index");
    }
  }
  render() {
    return (
      <div
        style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}
      >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#21b97a"
          barTintColor="white"
        >
          <TabBar.Item
            title="首页"
            key="home"
            icon={<i className="iconfont icon-ind" />}
            selectedIcon={<i className="iconfont icon-ind" />}
            selected={this.props.location.pathname === "/home/index"}
            onPress={() => {
              this.props.history.push("/home/index");
            }}
          >
            <Route path="/home/index" component={Index} />
          </TabBar.Item>
          <TabBar.Item
            title="找房"
            key="mapCity"
            icon={<i className="iconfont icon-findHouse" />}
            selectedIcon={<i className="iconfont icon-findHouse" />}

            selected={this.props.location.pathname === "/home/found"}
            onPress={() => {
              this.props.history.push("/home/found");
            }}
          >
            <Route path="/home/found" component={Found} />
          </TabBar.Item>
          <TabBar.Item
            title="资讯"
            key="news"
            icon={<i className="iconfont icon-infom" />}
            selectedIcon={<i className="iconfont icon-infom" />}
            selected={this.props.location.pathname === "/home/news"}
            onPress={() => {
              this.props.history.push("/home/news");
            }}
          >
            <Route path="/home/news" component={News} />
          </TabBar.Item>
          <TabBar.Item
            title="我的"
            key="my"
            icon={<i className="iconfont icon-my" />}
            selectedIcon={<i className="iconfont icon-my" />}
            selected={this.props.location.pathname === "/home/my"}
            onPress={() => {
              this.props.history.push("/home/my");
            }}
          >
            <Route path="/home/my" component={My} />

          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
  render2() {
    return <div>
      <h1>===========</h1>
      <Switch>
        <Route path="/home/index" component={Index} />
        <Route path="/home/found" component={Found} />
        <Route path="/home/news" component={News} />
        <Route path="/home/my" component={My} />

        <Route path="/home">
          <Redirect to="/home/index"></Redirect>
        </Route>
      </Switch>
      <h1>===========</h1>
    </div>
  }
}

export default Home;